<template>
  <div>
    <el-row :gutter="20">
      <el-form ref="searchForm" :label-position="labelPosition" label-width="100px" :model="searchForm">
        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
          <el-select
            v-model="searchForm.name"
            placeholder="请选择"
            style="width: 124px"
            class="filter-item"
            @change="handleSelectChange"
          >
            <el-option v-for="item in selectOptions" :key="item.key" :label="item.label" :value="item.key" />
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
          <el-form-item :label="valueLable">
            <el-input v-model="searchForm.value" :placeholder="valuePlaceholder" />
          </el-form-item>
        </el-col>
      </el-form>
      <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
        <el-button size="small" @click="handleReset('searchForm')">重置</el-button>
        <el-button size="small" type="primary" :loading="searchLoad" @click="handleSearch">查询</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'LineupBlacklistSearch',
  props: {
    searchLoad: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      labelPosition: 'left',
      dateType: 'datetime',
      selectOptions: [
        {
          key: 'driverName',
          label: '管理员名称'
        },
        {
          key: 'mobile',
          label: '手机号'
        }
      ],
      valueLable: '搜索内容',
      valuePlaceholder: '请输入要搜索的内容',
      searchForm: {
        name: '',
        value: ''
      }
    }
  },
  created() {

  },
  methods: {
    handleReset(formName) {
      this.$refs[formName].resetformData()
    },
    handleSearch() {
      const query = {}
      const searchForm = this.searchForm
      for (const i in searchForm) {
        if (typeof searchForm[i] === 'boolean' ||
            (Array.isArray(searchForm[i]) && searchForm[i].length > 0) ||
            searchForm[i]) {
          query[i] = searchForm[i]
        }
      }
      this.$emit('search', query)
    },
    getSearchForm() {
      return this.searchForm
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
    .container{
      padding:0 10px;
        .divider{
            height: 20px;
        }
    }
    .table_header{
        display:flex;
        align-items:center;
        justify-content:space-between;
    }
</style>

